<template>
    <div class="index body">
        <div class="in_logo" style="height:100px">
            <!-- <img src="../img/logo11.png" alt=""> -->
        </div>
        <div class="userinfo" v-show="ifshow">
            <p v-html="username" style="font-size: 0.4rem;"></p>
            <p v-html="phonename"></p>
        </div>
        <div class="list">
            <div class="form_box">
                <p>修改密码</p>
                <mt-field label="原密码" placeholder="请输入用户名" v-model="oldpassword"></mt-field>
                <mt-field label="新密码" placeholder="请输入密码" type="password" v-model="newpassword"></mt-field>
                <div class="btn_change" @click="changePassword">确定</div>
            </div>
            <p @click="logout" class="louget"  style="border-top: 1px solid #ccc;">退出登录</p>
            <!--<p>-->
                <!--<router-link to="/login">登录</router-link>-->
            <!--</p>-->
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    export default {
        components: {},
        name: "index",
        data() {
            return {
                oldpassword:'',
                newpassword:'',
                username:'',
                phonename:'',
                ifshow:false
            }
        },
        mounted(){
            let user = this.common.getpersondata(this).data;
            this.username = user.name;
            this.phonename = user.mobile;
            this.ifshow = true;
        },
        methods: {
            logout() {
                this.axios({
                    method: 'get',
                    url: this.common.baseURL+'/logout',
                    data: this.qs.stringify({}),
                    withCredentials: true,
                }).then((response) => {
                    this.common.loginCheak(this,response.data.code);
                    if(response.data == "logout->success"){
                        this.common.logout(this);
                    }
                }).catch((error) => {
                    console.log(error)
                });
            },
            changePassword(){
                if(this.newpassword==""){
                    return
                }
                this.axios({
                    method: 'get',
                    url: this.common.baseURL+'/wxpulic/updatePassword?oldPassword='+this.oldpassword+'&newPassword='+this.newpassword,
                    data: {
                        oldPassword:this.oldpassword,
                        newPassword:this.newpassword
                    },
                    withCredentials: true,
                }).then((response) => {
                    if(response.data.code==0){
                        Toast({
                            message: '密码修改成功',
                            position: 'center',
                            duration: 2000
                        });
                    }else{
                        Toast({
                            message: response.data.message,
                            position: 'center',
                            duration: 2000
                        });
                    }
                }).catch((error) => {
                    console.log(error)
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .index {
        overflow: auto;
        background:#109ffe url("../img/person_back.png") 0 0 no-repeat;
        background-size: 100% auto;
        .in_logo{
            img{
                width: 0.95rem;
                height: 0.88rem;
                display: block;
                margin: 1rem auto 0.5rem;
            }
        }
        .userinfo{
            p{
                margin: 0.2rem 0;
                text-align: center;
                color: #ffffff;
            }
        }
        .list {
            overflow: hidden;
            .form_box{
                overflow: hidden;
                margin: 0.8rem 0.4rem;
                background: #fff;
                border-radius: 0.1rem;
                padding: 0.3rem;
                p{
                    color: #3573ff;
                    font-size: 0.4rem;
                    letter-spacing: 1px;
                    border: 0;
                }
                .btn_change{
                    width: 4rem;
                    height: 0.8rem;
                    border-radius: 0.1rem;
                    background: #1b65fa;
                    margin: 0.3rem auto;
                    color: #fff;
                    text-align: center;
                    line-height: 0.8rem;
                    letter-spacing: 1px;
                    font-size: 0.36rem;
                    cursor: pointer;
                }
            }
            p {
                display: block;
                height: 1rem;
                line-height: 1rem;
                text-align: center;
                border-bottom: 1px solid #ccc;
                color: #fff;
                cursor: pointer;
                a{
                    color: #fff;
                    display: block;
                }
            }
        }
        .louget{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
    }
</style>
